<template>
    <header class="nav">
      <!-- nav头部导航 -->
      <div class="nav">
        <router-link to="/" class="nav-logo" title="微力首页" id="weily">Weily Lab</router-link>
        <ul>
          <li><a href="javascript:void(0)" title="点击进入" class="menu menu3">登录</a>
          </li>
          <li><a href="javascript:void(0)" title="点击进入" class="menu menu3">实验室</a>
            <div class="nav-menu nav-menu3">
              <router-link to="/members">成员</router-link>
              <router-link to="/honourswall">荣誉</router-link>
              <router-link to="/ouractivity">团建</router-link>
            </div>
          </li>
          <li><router-link to="/learnway" title="点击进入" class="menu menu2">学习指南</router-link>
           <!-- <div class="nav-menu nav-menu2">
              <a href="">开发工具</a>
              <a href="">手册</a>
              <router-link to="/learnway">学习路径</router-link>
            </div>-->
          </li>
          <li><a href="javascript:void(0)" title="点击进入" class="menu menu1">校园服务</a>
            <div class="nav-menu nav-menu1">
              <a href="http://www.xhban.com">小伙伴</a>
              <a href="">西瓜课表</a>
              <a href="">微信上墙</a>
            </div>
          </li>
        </ul>
      </div><!-- nav -->
    </header>
</template>

<script>
    export default {
        name: "m-header"
    }
</script>

<style scoped lang="stylus">
  header
    /*background-color silver*/

  /*导航nav=========================================================*/
  .nav{position: fixed; height: 70px; width: 100%; z-index: 9999; font-family: "微软雅黑"; top: 0; min-width: 1024px; }
  .nav-hover{background-color: rgba(0,0,0,.5); }
  .nav-hover2{background-color: #0e2335; }
  .nav .nav-logo{float: left; color: #fff; font-size: 26px; line-height: 70px; margin-left: 50px; }
  .nav>ul{height: 70px; width: 546px; float: right; padding-right: 30px; position: relative; }
  .nav>ul .menu{width: 124px; box-sizing: border-box;}
  .nav-menu{position: absolute; top: 70px; width: 124px; overflow: hidden; background: rgba(0,0,0,.5); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; height: 0; }
  .nav-menu:hover{height: 90px; }
  .nav-menu1{left: 50px; }
  .nav-menu2{left: 174px; }
  .nav-menu3{left: 298px; }
  .nav-menu a{display: block; font-size: 14px; line-height: 30px; text-indent: 30px; color: #fff; }
  .nav>ul li>a{display: block; color: #fff; float: right; font-size: 16px; line-height: 30px; padding: 20px 30px; font-family: "微软雅黑"; }
  .menu1:hover ~.nav-menu1{height: 90px; }
  .menu2:hover ~.nav-menu2{height: 90px; }
  .menu3:hover ~.nav-menu3{height: 90px; }
  .nav a:hover{background: rgba(0,0,0,.5); }
  #weily:hover{background: none; }
  .active{background: rgba(0,0,0,.5); }
  .active1{background: #0e2335; }
</style>
